<template>
  <div>
    <el-container>
      <!-- 顶部 -->
      <el-header class="header-layout">
        <Header />
        <div class="header-container">
          <div class="header-wrap">
            <el-image class="logo" :src="logo" @click="linkHome()" />
            <ul class="menu-container">
              <li
                v-for="(item,index) in menuList"
                :key="index"
                :class="{'active': activeIndex == index}"
                class="menu-list"
                @click="linkInfor(item,index)"
              >{{ item.title }}</li>
            </ul>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main class="main-layout">
        <router-view />
      </el-main>
      <!-- 底部 -->
      <el-footer class="footer-layout">
        <div class="footer-container">
          <div class="footer-wrap">
            <div class="copyright" v-html="copyright" />
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import logo from '@/assets/images/logo.png'
import Header from '@/components/header/index.vue'
import { getMenuList } from '@/apis/menu.js'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
    Header
  },
  data() {
    return {
      logo,
      subjects: [],
      copyright: '',
      menuList: [],
      activeIndex: 0
    }
  },
  computed: {
    ...mapState('article', ['menuId', 'categoryId', 'activeNum'])
  },
  created() {
    this.loadCopyright()
  },
  mounted() {
    this.getMenuList()
  },
  methods: {
    ...mapActions('article', ['setMenuId', 'setCategoryId', 'setActiveNum']),
    linkInfor(item, index) {
      this.activeIndex = index
      this.setActiveNum({ activeIndex: this.activeIndex })
      this.setMenuId({ menuId: item.id })
      this.setCategoryId({ categoryId: item.categoryId })
      if (item.type === 1) {
        if (item.url == '/baike' || item.url == '/mall') {
          this.$router.push({
            path: item.url
          })
        } else {
          this.$router.push({ path: `/information/${item.url}` })
        }
      } else {
        window.open('https://www.baidu.com/')
      }
    },
    // 切换路由设置menuId
    handleOpen(item) {
      console.log(item)
    },
    // 获取menuList
    async getMenuList() {
      try {
        const res = await getMenuList()
        this.menuList = res
        // 判断本地存储里有无activeNum 有则设置成当前的索引
        if (this.activeNum) {
          this.activeIndex = this.activeNum
        }
        // 判读本地存储有没有menuId 若没有初始化设置menuId为导航的第一项
        if (!this.menuId || !this.categoryId) {
          this.setMenuId({ menuId: this.menuList[0].id })
          this.setCategoryId({ categoryId: this.menuList[0].categoryId })
        }
      } catch (error) {
        this.$message({
          type: 'error',
          message: error.message
        })
      }
    },
    linkHome() {
      this.$router.push('/')
      this.activeIndex = 0
    },
    loadCopyright() {
      const copyright = `<p>版权所有：达内时代科技集团, IT学院, ${process.env.VUE_APP_Tech === 'linux' ? 'Linux云计算教研部' : 'Java教学研发部'}</p>` +
          '<p>备案号：京ICP备17010360号（模拟数据）' +
          '<img style="position: relative; top: 5px; margin-left: 20px; margin-right: 5px;" ' +
          'src=""/>' +
          '京公网安备 110111010110号（模拟数据）</p>' +
          '<p><span>联系邮箱：java@tedu.cn</span>' +
          '<span style="margin-left: 30px;">公众号：达内教育</span></p>' +
          '<p>建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站</p>'
      this.copyright = copyright
    }
  }
}
</script>

<style>
.header-layout {
  height: 100px !important;
  background: #fff;
  text-align: center;
  padding: 0 !important;
}

.header-wrap {
  width: 1200px;
  margin: 0px auto 0 auto;
}
.menu-container{
  margin-left: 220px;
  display:flex;
  justify-content: flex-start;
  overflow-x:auto;
  width: 1000px;
}
.menu-list{
  height:50px;
  margin-right:5px;
  line-height: 50px;
  /* 超出滚动的关键，没有它元素会自动缩小，不会滚动 */
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
  padding: 0px 20px;
  cursor: pointer;
}
.menu-list:hover{
  color: #44B549;
}
::-webkit-scrollbar {
  /* 隐藏滚动条 */
  display: none;
}
.active{
  color: #44B549;
  border-bottom: 2px solid #44B549;
}
.header-wrap .logo {
  width: 160px;
  height: 50px;
  float: left;
  cursor: pointer;
}

.header-wrap .menu {
  margin-left: 200px;
}

.main-layout {
  padding: 0 !important;
}

.main-container {
  margin-top: 20px;
}

.main-wrap {
  width: 1200px;
  margin: 0 auto;
}

.main-wrap .nav-breadcrumb {
  margin-bottom: 20px;
}

.footer-layout {
  text-align: center;
}

.footer-wrap {
  width: 1200px;
  margin: 20px auto 0 auto;
  padding: 10px 0 30px 0;
  border-top: 2px solid #44B549 !important;
}

.footer-wrap .copyright {
  color: dimgray;
  font-size: 13px;
}

.footer-wrap .copyright p {
  line-height: 30px;
}

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.left-aside-container {
  width: 880px;
  float: left;
}

.left-aside-wrap {

}

.left-aside-wrap .article-list {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.right-aside-container {
  width: 300px;
  text-align: left;
  float: right;
}

.right-aside-wrap {

}

.article-list-item {

}

.article-list-item .left {

}

.article-list-item .left .image {
  width: 220px;
  height: 150px;
  border-radius: 5px;
  float: left;
}

.article-list-item .right {
  margin-left: 240px;
  text-align: left;
}

.article-list-item .right .title {
  padding: 6px 0;
  font-size: 20px;
}

.article-list-item .right .title a {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #000;
}

.article-list-item .right .title a:hover {
  color: #44B549;
}

.article-list-item .right .content {
  margin: 25px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: #333;
}

.article-list-item .right .tag {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 3px;
}

.article-list-item .right .date {
  margin-left: 12px;
  font-size: 13px;
  font-style: normal;
  color: #999;
}

.btn-load-more {
  width: 200px;
  margin: 0 auto;
}
.btn-container{
  text-align: center;
}
.el-menu--horizontal {
  border: none !important;
}

.el-menu-item {
  font-size: 20px !important;
}

.el-menu-item.is-active {
  background: transparent !important;
  border-bottom: 2px solid #44B549 !important;
}

.el-menu-item:hover {
  color: #44B549 !important;
  background: transparent !important;
}
</style>
